<template>
	<view v-if="authStatus == 1" bg-green-5 h-40px lh-40px pl-10px c-white text-lg>审核已通过</view>
	<view v-else-if="authStatus == 2" bg-red-5 h-40px lh-40px pl-10px c-white text-lg>审核被拒绝</view>
	<view class="page page-personal-auth" pb-80px>
		<view v-if="!authStatus" text-center>
			<view class="icon icon-audit text-6xl c-green-5" py-50px></view>
			<view text="xl">您的申请已提交审核，请耐心等待</view>
			<view pt-20px pb-100px c-gray-4>温馨提示：申请审核将在72时内完成</view>
			<view px-50px>
				<nut-button size="large" type="info" @click="back">返回</nut-button>
			</view>
		</view>

		<view v-else>
			<view py-20px px-10px head-bg color-white>
				<view pb15px text-lg>认证企业员工，获得以下权益</view>
				<view pb10px text-sm> ● 账号加 V 认证标识</view>
				<view pb10px text-sm> ● 供求专区企业信息展示</view>
				<view text-sm> ● 动态优先曝光</view>
			</view>

			<view p-10px>
				<view pt14px pb14px class="license">
					<view pb14px>认证材料</view>
					<uni-file-picker return-type="object" v-model="image1" @select="uploadSelect"
					:del-icon="false" :auto-upload="false" mode="grid" disable-preview
					>
						<view class="icon icon-upload text-3xl color-blue-5"></view>
						<view color-blue-5>请上传名片或工卡</view>
					</uni-file-picker>
				</view>

				<view flex items-center justify-between pt5px pb5px border-t>
					<view> <text color-red-5>*</text> 企业全称</view>
					<uni-easyinput color-gray v-model="enterprise" :inputBorder="false" placeholder="请输入企业全称"></uni-easyinput>
				</view>

				<view flex items-center justify-between pt5px pb5px border-t>
					<view> <text color-red-5>*</text> 姓名</view>
					<uni-easyinput color-gray v-model="name" :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
				</view>

				<view flex items-center justify-between pt5px pb5px border-t>
					<view> <text color-red-5>*</text> 职位</view>
					<uni-easyinput color-gray v-model="corporation" :inputBorder="false" placeholder="请输入职位"></uni-easyinput>
				</view>

				<view px-3vw py-20px w-full fixed bottom-0 left-0 bg-white z-19 box-border>
					<nut-button size="large" type="info" @click="submit">{{authStatus? '修改':'提交'}}员工认证</nut-button>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { useUserStore } from '@/stores/user'
	const user = useUserStore()
	
	const image1 = ref({})
	let currentImage = ''

	const uploadSelect = async ({tempFiles}) => {
		const file = tempFiles[0]
		const uploadRes = await api.uploadFile(file.url)
		currentImage = uploadRes.images
	}

	const name = ref('')
	const enterprise = ref('')
	const corporation = ref('')

	const authStatus = ref(10086)		//0待审核 1审核通过 2拒绝
	async function initData() {
		if(user.userInfo.type == 'firm') return
		const data = await api.getAuthInfo({
			member_type: 'employee'
		})
		if(data) {
			authStatus.value = data.status
			if(!data.status) return
			name.value = data.employee_name
			corporation.value = data.position
			enterprise.value = data.firm_name
			setImage(image1,data.work_card)
			currentImage = data.work_card
		}
	}
	initData()

	const submit = async () => {
		if(!currentImage){
			uni.showToast({
				title: '图片必须上传',
				icon: 'none'
			})
			return
		}

		if(!name.value || !enterprise.value || !corporation.value){
			uni.showToast({
				title: '所有选项必须填写',
				icon: 'none'
			})
			return
		}
		const id = await api.employeeAuth({
			work_card: currentImage,
			firm_name: enterprise.value,
			employee_name: name.value,
			position: corporation.value
		})
		if(id) {
			authStatus.value = 0
		}

	}


	const setImage = (image,url) => {
		image.value = {
			url,
			name: url.split('/').pop(),
			extname: url.split('.').pop()
		}
	}

	const back = () => {
		uni.navigateBack()
	}

	const oversize = () => {
		uni.showToast({
			title: '上传图片最大不能超过10M',
			icon: 'none'
		})
		return
	}

</script>

<style lang="scss">

.page-personal-auth {
	min-height: unset;
	box-sizing: border-box;
	.head-bg {
		background-color: $uni-color-navigator;
		border-top: 1px solid #eee;
	}

	.license .uni-file-picker__container{
		aspect-ratio: 86/54;

		.file-picker__box {
			width: 100%!important;
			height: 100%!important;
			padding: 80px 0;
		}
	}

	.border-t{
		border-bottom: 1px solid #eee;
	}
	.uni-easyinput  {
		text-align: right;
	}

	.is-add {
		flex-direction: column;
	}

	.input-value-border {
		border: none;
	}

	.nut-uploader__slot {
		width: 100%;
	}

}


</style>
